import React, { useState } from 'react';
import Button from '@mui/material/Button';
import HidingAll from '../components/HidingAll';
import NewAdminButton from '../components/NewAdminButton';
import './NewAdminCard.scss';
import TextField from '@mui/material/TextField';
import Snackbar from '@mui/material/Snackbar';
import MuiAlert from '@mui/material/Alert';


const Alert = React.forwardRef(function Alert(props, ref) {
  return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />;
});


const isEmail = (email) => {
    return (String(email).includes("@"));
};


const check_ia_already_admin = (email) => {
    return false
}


function NewAdminCard() {
    const [inputValue, setInputValue] = useState("");
    const [stateEmail, setStateEmail] = useState("");
    const [showAddingPage, setShowAddingPage] = useState(false);
    const [open, setOpen] = React.useState(false);


    const addAdmin = () => {
        setShowAddingPage(true);
    }

    const closeHiding = () => {
        setShowAddingPage(false);
        setInputValue("");
        setStateEmail("ok");
        setOpen(false)
    }

    const tryAddAdmin = () => {
        if (inputValue === "success@root.net") {
            setStateEmail("ok");
            setOpen(true);
        } else if (!isEmail(inputValue)) {
            setStateEmail("err_not_email");
        } else if (check_ia_already_admin(inputValue)) {
            setStateEmail("err_already");
        } else {
            setStateEmail("ok");
            setOpen(true);
            setInputValue("");
        }
    }

    const handleChange = e => {
        setInputValue(String(e.target.value).trim());
    };

    const handleClose = (event, reason) => {
        if (reason === 'clickaway') {
            return;
        }
        setOpen(false);
    };

    var input;    
    if (stateEmail === "err_not_email") {
        input = <TextField
            error
            id="outlined-error-helper-text"
            label="Ошибка"
            helperText="введите почту"
            style={{marginBottom: "0.5cm", width: "8cm"}}
            value={inputValue} 
            onChange={handleChange}
        />;
    } else if (stateEmail === "err_already") {
        input = <TextField
            error
            id="outlined-error-helper-text"
            label="Ошибка"
            helperText="уже существует"
            style={{marginBottom: "0.5cm", width: "8cm"}}
            value={inputValue} 
            onChange={handleChange}
        />;

    } else {
        input = <TextField id="outlined-basic" 
            label="Эл. почта"
            variant="outlined" 
            style={{marginBottom: "0.5cm", width: "8cm"}}
            value={inputValue} 
            onChange={handleChange}
        />;
    }

    return (
        <div>
            <NewAdminButton func={addAdmin} />
            { showAddingPage && (
                <div>
                    <HidingAll />
                    <div className="card">
                        <h1 className="card-title">Добавить <br/> администратора</h1>
                        {input}
                        <Button variant="contained" 
                            id="my_button"
                            onClick={tryAddAdmin}
                            color="success" 
                            style={{width: "6cm", height: "1.5cm",
                                marginBottom: "0.5cm", backgroundColor: "#209D15", 
                                fontSize: "20px", borderRadius: "8px"}}>
                            Добавить
                        </Button>
                        <Button variant="outlined" 
                            id="my_button"
                            color="error" 
                            onClick={closeHiding}
                            style={{width: "6cm", height: "1.5cm", fontSize: "20px", 
                                borderRadius: "8px"}}>
                            <b>Закрыть</b>
                        </Button>
                        <Snackbar open={open} autoHideDuration={3000} onClose={handleClose}>
                            <Alert onClose={handleClose} 
                                severity="success" 
                                sx={{ width: '100%' }} 
                                style={{ transform: "translate(-100%, 200%)" }}>
                                Админ успешно добавлен
                            </Alert>
                        </Snackbar>
                    </div>
                </div>
            )}
        </div>
    )
}

export default NewAdminCard;
